<template>
    <!--引入 el-container 布局-->
    <el-container class="index-container">
        <!--头部-->
        <el-header>
            <div>
                <img src="../assets/images/logo.png" width="55px" height="55px" alt="小黄人!!!" />
                <span>图书管理系统</span>
            </div>
            <el-button type="info" size="default" @click="logout">退出</el-button>
        </el-header>
        <el-container>
            <!--侧边栏-->
            <el-aside :width="isCollapse ? '64px' : '180px' ">
                <div class="fold-button" @click="fold()">三</div>
                <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
                    active-text-color="#409eff" unique-opened :collapse="isCollapse" :collapse-transition="false"
                    :router="true" :default-active="$route.path">
                    <!--使用组件递归处理菜单树-->
                    <menu-tree :menus="menus"></menu-tree>
                </el-menu>
            </el-aside>
            <!--主体-->
            <el-main>
                <!--面包屑导航-->
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item v-if="breadcrumbList" v-for="item in breadcrumbList" :to="item[0]">
                        {{item[1]}}
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <br />
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>

    import MenuTree from '../components/MenuTree.vue'

    export default {
        components: {
            MenuTree
        },

        data() {
            return {
                menus: [],
                isCollapse: false,
            }
        },

        computed: {
            breadcrumbList: function () {
                return this.$store.state.breadcrumbList;
            }
        },

        created() {
            this.menus = JSON.parse(window.sessionStorage.getItem("userMenus"));
        },

        methods: {
            // 退出登录
            async logout() {
                const { data: res } = await this.$http.get("/door/logout");
                if (res) {
                    window.sessionStorage.clear();
                    this.$store.state.breadcrumbList.clear();
                    this.$message.success("退出成功!");
                }
                this.$router.push('login');
            },
            // 折叠菜单
            fold() {
                this.isCollapse = !this.isCollapse;
            },
        }
    }
</script>
<style lang="less" scoped>
    .index-container {
        height: 100%;
    }

    .el-header {
        background-color: #333744;
        display: flex;
        justify-content: space-between;
        padding-left: 0%;
        color: #fff;
        font-size: 20px;
        align-items: center;

        >div {
            display: flex;
            align-items: center;

            span {
                margin-left: 15px;
            }
        }
    }

    .span {
        margin-left: 15px;
    }

    .el-aside {
        background-color: #333744;

        .el-menu {
            border-right: none;
        }
    }

    .el-main {
        background-color: #E9EEF3;
    }

    .fold-button {
        background-color: #4A5064;
        font-size: 10px;
        line-height: 24px;
        color: #fff;
        text-align: right;
        letter-spacing: 0.2em;
        cursor: pointer;
    }
</style>